<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { getMyAllCoupons } from '../api/mycoupon.js'

let CouponList = ref([])
// 记录当前选中的按钮
const selected = ref(0)

onMounted(() => {
    getAllUserCoupons()
})

async function getAllUserCoupons() {
    const response = await getMyAllCoupons(0)
    console.log("未使用的优惠券：", response)
    CouponList.value = response.data.data
}

async function getUsedAllCoupon() {
    const response = await getMyAllCoupons(1)
    console.log("已使用的优惠券：", response)
    CouponList.value = response.data.data
}
</script>

<template>
    <div class="container">
        <h2>我的优惠券列表</h2>
        <div class="button-group">
            <!-- 0 未使用，1 已使用 -->
            <button 
                :class="{'active': selected === 0}"
                @click="selected = 0; getAllUserCoupons()">未使用</button>
            <button 
                :class="{'active': selected === 1}"
                @click="selected = 1; getUsedAllCoupon()">已使用</button>
        </div>
        <ul>
            <li v-for="vo in CouponList" :key="vo.mycoupon.mycouId" class="coupon-card">
                <div class="coupon-info">
                    <div><strong>优惠券编号：</strong>{{ vo.mycoupon.mycouponNumber }}</div>
                    <div><strong>优惠券名称：</strong>{{ vo.coupon.couName }}</div>
                    <div><strong>优惠券金额：</strong>¥{{ vo.coupon.couMoney }}</div>
                    <div><strong>优惠券类型：</strong>{{ vo.coupon.couType }}</div>
                    <div><strong>优惠券开始时间：</strong>{{ vo.coupon.couStartTime }}</div>
                    <div><strong>优惠券截止时间：</strong>{{ vo.coupon.couEndTime }}</div>
                    <div><strong>优惠领取时间：</strong>{{ vo.mycoupon.createTime }}</div>
                    <div>
                        <strong>状态：</strong>
                        <span v-if="vo.mycoupon.mycouponStatus == 0" class="status unused">未使用</span>
                        <span v-else-if="vo.mycoupon.mycouponStatus == 1" class="status used">已使用</span>
                        <span v-else-if="vo.mycoupon.mycouponStatus == 2" class="status expired">已过期</span>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</template>

<style scoped>
/* 外部容器设置 */
.container {
  padding-top: 80px; /* 上边距 80px */
  padding-left: 20px;
  padding-right: 20px;
  background-color: #f9f9f9;
}

h2 {
  text-align: center;
  font-size: 28px;
  color: #333;
  margin-bottom: 20px;
}

/* 按钮组 */
.button-group {
  text-align: center;
  margin-bottom: 20px;
}

.button-group button {
  background-color: #f10180; /* 默认粉红色 */
  color: white;
  font-size: 16px;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin: 0 10px;
  transition: background-color 0.3s, transform 0.3s;
}

/* 按钮 hover 和 active 状态 */
.button-group button:hover {
  background-color: #e01b6f; /* hover 时的深粉色 */
  transform: scale(1.05); /* 放大效果 */
}

.button-group button.active {
  background-color: #d11d68; /* 选中状态的深粉色 */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* 增加阴影 */
}

.button-group button:focus {
  outline: none;
}

ul {
  list-style-type: none;
  padding: 0;
}

.coupon-card {
  background-color: white;
  padding: 20px;
  margin-bottom: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.coupon-info {
  font-size: 16px;
  color: #333;
  line-height: 1.6;
}

.coupon-info div {
  margin-bottom: 10px;
}

.coupon-info strong {
  font-weight: 600;
  color: #333;
}

/* 状态的颜色 */
.status {
  padding: 4px 8px;
  border-radius: 4px;
  font-weight: 500;
  display: inline-block;
}

.status.unused {
  background-color: #f1c40f; /* 未使用：黄色 */
  color: #fff;
}

.status.used {
  background-color: #2ecc71; /* 已使用：绿色 */
  color: #fff;
}

.status.expired {
  background-color: #e74c3c; /* 已过期：红色 */
  color: #fff;
}
</style>
